{% extends "base.html" %}
{% load i18n %}
{% load comments %}

{% block css %}
    <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/3D.css" />
    <link rel="stylesheet" href="{{STATIC_URL}}css/showLoading.css" type="text/css" media="screen" charset="utf-8" />

{% endblock %}

{% block content %}


    {% if not javascript_arborescense and not stl %}
        <p>
        {% trans "This document has no 3D data. Maybe it does not have a STEP/STL file or openPLM has not yet converted its STEP file." %}

        </p>
    {% else %}
        {% if javascript_arborescense %}
            <div class="trans" >
                <div class="menu" id="menu_">   </div>
            </div> 
        {% endif %}

        <span id="toolbar" class="ui-widget-header ui-corner-all" style="display:none">

            <div id="views-toolbar" class="tb-btn-group">
                <button id="view-axo" class="tb-btn view">{% trans "Set to axometric view" %}</button>
                <button id="view-front" class="tb-btn view">{% trans "Set to front view" %}</button>
                <button id="view-right" class="tb-btn view">{% trans "Set to right view" %}</button>
                <button id="view-top" class="tb-btn view">{% trans "Set to top view" %}</button>
                <button id="view-rear" class="tb-btn view">{% trans "Set to rear view" %}</button>
                <button id="view-left" class="tb-btn view">{% trans "Set to left view" %}</button>
                <button id="view-bottom" class="tb-btn view">{% trans "Set to bottom view" %}</button>
            </div>

            <div id="colors-toolbar" class="tb-btn-group">
                <button id="random-color" class="tb-btn view">{% trans "Random colors" %}</button>
                <button id="initial-color" class="tb-btn view">{% trans "Initial colors" %}</button>
            </div>

            <input type="checkbox" checked="on" id="transparency"><label for="transparency" class="tb-btn view">{% trans "Toggle transparency" %}</label></input>
            <input type="checkbox" id="axis"><label for="axis" class="tb-btn view">{% trans "Toggle axis visibility" %}</label></input>
            <button id="full-screen" class="tb-btn view" title="{% trans "Toggle fullscreen display" %}"><i class="tb-icon-fullscreen"></i></button>
        </span>

        <div id="webgl_warning" class="main" style="display:none;">
            <div class="warning_container">
                <div class="warning">

                    <p><strong>WARNING:</strong> Your browser does not support <a target="_top" href="http://www.khronos.org/webgl/wiki/Main_Page">WebGL</a>. The 3D view works best with WebGL support, which is available in the following browsers:</p>
                    <ul>
                        <li><a target="_top" href="http://www.google.com/chrome">Google Chrome 9+</a> (Recommended)</li>
                        <li><a target="_top" href="http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">Firefox 4.0+</a></li>

                        <li><a target="_top" href="http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">Safari Nightly (OS X 10.6+ only)</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="zoom-toolbar" style="display:none">
            <img src="{{STATIC_URL}}img/navigate/zoom-out.png"
            class="ui-button ui-widget ui-state-default ui-corner-all"
            id="zoom-out"
            title="{% trans "Zoom out" %}"/>
            <img src="{{STATIC_URL}}img/navigate/zoom-in.png"
            class="ui-button ui-widget ui-state-default ui-corner-all"
            id="zoom-in"
            title="{% trans "Zoom in" %}"/>
            <img src="{{STATIC_URL}}img/navigate/zoom-fit-best.png"
            class="ui-button ui-widget ui-state-default ui-corner-all"
            id="zoom-fit-all"
            title="{% trans "Fit all" %}"/>
        </div>
        <div id='zoom'></div>
    {% endif %}
{% endblock %}


{% block scripts %} 
    {% if javascript_arborescense or stl %}

        <script type="text/javascript" src="{{STATIC_URL}}js/screenfull.min.js"></script>
        <script type="text/javascript" src="{{STATIC_URL}}js/3D/three-min.js"></script> 
        <script type="text/javascript" src="{{STATIC_URL}}js/3D/struct.js"></script> 
        <script type="text/javascript" src="{{STATIC_URL}}js/jquery.showLoading.min.js"></script>
        <script type="text/javascript">
            THREE.Vertex = function ( position ) { return position; };
        </script>
        {%  if javascript_arborescense %}
            <script type="text/javascript"> 
                function build_tree () {
                    $.globalEval("{{javascript_arborescense|escapejs}}");
                } 
            </script>
        {% endif %}
        <script type="text/javascript" src="{{STATIC_URL}}js/3D/view.js"></script> 
        <script type="text/javascript">
            $( function () {
                {% if stl %}
                    view = new View3D(false, '/file/{{stl_file.id}}/');
                {% else %}
                    view = new View3D(true, null, {{ GeometryFiles|safe }});
                {% endif %}
                view.render();
            });
        </script>
    {% endif %}
{% endblock %}
